<template>
  <div class="content">
    <dc-header :page-to="'/employe'" :title="$route.query.type==1?'最赚钱员工':'最勤劳员工'" :rightIcon="''"></dc-header>
    <div class="head-top">
      <dc-date @getTabBarDatep="getDate" :startTime="this.curDate.startTime" :startDateType="this.curDate.type"></dc-date>
    </div>
    <dc-rank ref="saleRank" :titles="rankTitles" :rankKey="rankKey"
             :param="param" :url="url"></dc-rank>
  </div>
</template>

<script>
  import header from '@/components/header';
  import rankList from '@/components/rankList';
  import date from '@/components/datetabbar/all';
  import {mapActions, mapGetters} from 'vuex';

  export default {
    components: {
      'dc-header': header,
      'dc-rank': rankList,
      'dc-date': date
    },
    data () {
      return {
        type: parseInt(this.$route.query.type),
        url: '',
        param: {
          timeFlag: 1,  //时间范围标识，1-日；2-周；3-月；4-年
          beginTime: null,
          endTime: null
        },
        rankKey: [],
        rankTitles: [
          {name: '姓名', isRank: false},
          {name: '贡献营业额', isRank: true, rankFlag: 1, rankFlayType: 0},
          {name: '占比', isRank: true, rankFlag: null, rankFlayType: 0}
        ]
      };
    },
    created () {
      this.param.timeFlag = this.curDate.type;
      this.param.beginTime = this.curDate.startTime;
      if (this.type === 1) {
        this.rankTitles[1].name = '贡献营业额';
        this.rankKey = ['empName', 'empAmount', 'empTurnoverRatio'];
        this.url = 'getEmpEarnRanking';
      } else {
        this.rankTitles[1].name = '服务桌数';
        this.rankKey = ['empName', 'empServiceTables', 'empServiceTablesRatio'];
        this.url = 'getEmpServiceRanking';
      }
    },
    activated () {
      this.type = parseInt(this.$route.query.type);
      this.param.timeFlag = this.curDate.type;
      this.param.beginTime = this.curDate.startTime;
      if (this.type === 1) {
        this.rankTitles[1].name = '贡献营业额';
        this.rankKey = ['empName', 'empAmount', 'empTurnoverRatio'];
        this.url = 'getEmpEarnRanking';
      } else {
        this.rankTitles[1].name = '服务桌数';
        this.rankKey = ['empName', 'empServiceTables', 'empServiceTablesRatio'];
        this.url = 'getEmpServiceRanking';
      }
    },
    computed: {
      ...mapGetters(['curDate'])
    },
    methods: {
      ...mapActions({saveDate: 'saveDate', clearDate: 'clearDate'}),
      getDate (date) {
        this.saveDate(date);
        this.param.timeFlag = date.type;
        this.param.beginTime = date.startTime;
        this.param.endTime = date.endTime;
        this.$refs.saleRank.changeList();
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/variable";

  .list {
    font-size: px2rem(30px);
    line-height: 2;
    background-color: #fff;
  }

  .head-bg {
    background-color: #f5f5f5;
    font-weight: bold;
  }
</style>
